<html>
<head>
  <script src="../OLLoader.js"></script>
  <script type="text/javascript">
    var map, control, layer; 

    function init_map() {
        control = new OpenLayers.Control.DragPan();
        map = new OpenLayers.Map("map", {controls:[control]});
        layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                    "http://labs.metacarta.com/wms/vmap0",
                    {layers: 'basic'} );
        map.addLayer(layer); 
        map.zoomToMaxExtent();
        map.zoomIn();
        control.activate();
        return [map, control];
    }    
    function test_Control_DragPan_constructor (t) {
        t.plan( 1 );
    
        control = new OpenLayers.Control.DragPan();
        t.ok( control instanceof OpenLayers.Control.DragPan, "new OpenLayers.Control returns object" );
    }
    function test_Control_DragPan_drag (t) {
        t.plan(4);
        var data = init_map();
        map = data[0]; control = data[1];
        res = map.baseLayer.resolutions[map.getZoom()];
        t.eq(map.center.lat, 0, "Lat is 0 before drag");
        t.eq(map.center.lon, 0, "Lon is 0 before drag");
        map.events.triggerEvent('mousedown', {'type':'mousedown', 'xy':new OpenLayers.Pixel(0,0), 'which':1});
        map.events.triggerEvent('mousemove', {'type':'mousemove', 'xy':new OpenLayers.Pixel(5,5), 'which':1});
        map.events.triggerEvent('mouseup', {'type':'mouseup', 'xy':new OpenLayers.Pixel(5,5), 'which':1});
        
        t.eq(map.getCenter().lat, res * 5, "Lat is " + (res * 5) + " after drag");
        t.eq(map.getCenter().lon, res * -5, "Lon is " + (res * -5) + " after drag");
    }
    function test_Control_DragPan_drag_documentDrag (t) {
        t.plan(4);
        control = new OpenLayers.Control.DragPan({documentDrag: true});
        map = new OpenLayers.Map("map", {controls:[control]});
        layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://labs.metacarta.com/wms/vmap0",
                    {layers: 'basic'} );
        map.addLayer(layer);
        map.zoomToMaxExtent();
        map.zoomIn();
        control.activate();

        res = map.baseLayer.resolutions[map.getZoom()];
        t.eq(map.center.lat, 0, "Lat is 0 before drag");
        t.eq(map.center.lon, 0, "Lon is 0 before drag");
        map.events.triggerEvent('mousedown', {'type':'mousedown', 'xy':new OpenLayers.Pixel(0,0), 'which':1});
        map.events.triggerEvent('mousemove', {'type':'mousemove', 'xy':new OpenLayers.Pixel(5,5), 'which':1});
        map.events.triggerEvent('mouseup', {'type':'mouseup', 'xy':new OpenLayers.Pixel(5,5), 'which':1});
        
        t.eq(map.getCenter().lat, res * 5, "Lat is " + (res * 5) + " after drag");
        t.eq(map.getCenter().lon, res * -5, "Lon is " + (res * -5) + " after drag");
    }
    function test_Control_DragPan_click(t) {
        t.plan(1);
        var control = new OpenLayers.Control.DragPan();
        var map = new OpenLayers.Map("map", {controls:[control]});
        var layer = new OpenLayers.Layer.WMS("OpenLayers WMS", 
                                        "http://labs.metacarta.com/wms/vmap0",
                                        {layers: 'basic'});
        map.addLayer(layer); 
        map.zoomToMaxExtent();
        map.zoomIn();
        control.activate();
        map.setCenter = function() {
            t.ok(false, "map.setCenter should not be called here");
        };
        var xy = new OpenLayers.Pixel(0, 0);
        var down = {
            'type': 'mousedown',
            'xy': xy,
            'which': 1
        };
        var move = {
            'type': 'mousemove',
            'xy': xy,
            'which': 1
        };
        var up = {
            'type': 'mouseup',
            'xy': xy,
            'which': 1
        };
        map.events.triggerEvent('mousedown', down);
        map.events.triggerEvent('mousemove', move);
        map.events.triggerEvent('mouseup', up);
        t.ok(true, "clicking without moving the mouse does not call setCenter");
    }
    

  </script>
</head>
<body>
    <a id="scale" href="">DragPan</a> <br />
    <div id="map" style="width: 1024px; height: 512px;"/>
</body>
</html>
